<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      label-width="110px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同名称" prop="contractName">
            <el-input v-model="ruleForm.contractName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同排序">
            <el-input-number v-model="ruleForm.sort" :min="1"></el-input-number>
          </el-form-item>
        </el-col>
                <el-col :span="12">
          <el-form-item label="是否打包下载" prop="showStatus">
            <!-- <el-input v-model="ruleForm.productId"></el-input> -->
            <el-select v-model="ruleForm.showStatus" placeholder="请选择">
                <el-option
              v-for="item in isHaveAcc"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
                <el-col :span="12">
          <el-form-item label="合同类型" prop="contractType">
            <!-- <el-input v-model="ruleForm.productId"></el-input> -->
             <el-select v-model="ruleForm.contractType" placeholder="请选择">
            <el-option
              v-for="item in contractData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品" prop="productId">
            <el-select v-model="ruleForm.productId" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="productType == 'update'">
          <el-form-item label="原有附件">
            <el-input v-model="ruleForm.oldName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传附件">
            <el-upload
              class="upload-demo"
              action=""
              accept=".docx,.doc"
              :auto-upload="false"
              :on-change="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div><el-button type="primary" @click="onSubmit">提交</el-button></div>
  </div>
</template>
<script>
import {getAstatus} from "../../../src/assets/js/api";
export default {
  name: "Product",
  props: ["options", "productType", "productForm"],
  data() {
    return {
      ruleForm: {
        contractName: null,
        productId: null,
        sort: 1,
        file: null,
        showStatus:null,
        contractType:null
      },
      fileList: [],
      rules: {
        contractName: [
          { required: true, message: "请输入合同名称", trigger: "blur" },
        ],
        productId: [
          { required: true, message: "请选择产品", trigger: "change" },
        ],
        showStatus: [
          { required: true, message: "请选择是否打包下载", trigger: "change" },
        ],
        contractType: [
          { required: true, message: "请选择合同类型", trigger: "change" },
        ],
      },
      isHaveAcc:[],
      contractData:[],
    };
  },
  created() {
    if (this.productType == "update") {
      this.ruleForm = this.productForm;
      this.ruleForm.file = null;
    };
    this.getAstatus()
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          delete this.ruleForm.contractUrl;
          delete this.ruleForm.createTime;
          delete this.ruleForm.oldName;
          delete this.ruleForm.updateId;
          delete this.ruleForm.updateTime;
          const formData = new FormData();
          Object.keys(this.ruleForm).forEach((key) => {
            formData.append(key, this.ruleForm[key]);
          });
          if (this.productType == "add") {
            if (this.ruleForm.file == null) {
              this.$message.warning("请上传文件");
              return false;
            }
           
            this.axios
              .post("/sys/contract/template/save", formData, {
                //请求头配置
                headers: {
                  "Content-Type": "multipart/form-data",
                },
              })
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message.success(res.data.message);
                  this.$emit("refresh");
                } else {
                  this.$message.error(res.data.message);
                }
              });
          } else if (this.productType == "update") {
            this.axios
              .post("/sys/contract/template/update", formData, {
                //请求头配置
                headers: {
                  "Content-Type": "multipart/form-data",
                },
              })
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message.success(res.data.message);
                  this.$emit("refresh");
                } else {
                  this.$message.error(res.data.message);
                }
              });
          }
        }
      });
    },
        // 获取是否类型
    getAstatus() {
     getAstatus("whether_state").then(res => {
        this.isHaveAcc = res.data;
      });
      getAstatus("contract_type").then(res => {
        this.contractData = res.data;
      });
      },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      
      this.ruleForm.file = file.raw;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`, fileList);
    },
  },
};
</script>
<style type="less" scoped>
::v-deep .el-input__inner {
  width: 250px;
}
::v-deep .el-input-number {
  width: 250px;
}
.upload-demo {
  display: flex;
}
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
  transition: none;
}

::v-deep .el-list-enter,
::v-deep .el-list-leave-active {
  opacity: 0;
}
::v-deep .el-upload-list {
  height: 40px;
}
</style>